<template>
    <div class="app_data">
        <div class="title">
            <h2>租金分析</h2>

        </div>
        <div class="query-c">
            <Form inline>
                <FormItem>
                    <Select v-model="searchParams.city_code" style="width:200px" placeholder="请选择城市">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="searchParams.rent_mode" style="width:200px" placeholder="请选择租赁方式">
                        <Option v-for="item in rentModeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="searchParams.orientation" style="width:200px" placeholder="请选择朝向">
                        <Option v-for="item in orientationList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="searchParams.size" style="width:200px" placeholder="请选择面积范围">
                        <Option v-for="item in sizeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit()">搜索</Button>
                </FormItem>
            </Form>
        </div>
        <div class="update">
            <div id="main" style="width: 100%; height: 500px"></div>
        </div>

    </div>
</template>
<script>
import {rent, getDict , getOrientationList} from "../api";

export default {
    name: 'hello',
    data() {
        return {
            eData: [],
            searchParams: {
                size: '',
                orientation: '',
                rent_mode: '',
                city_code:''
            },
            cityList : [],
            rentModeList : [
                {label:'整租',value:'整租'},
                {label:'合租',value:'合租'}
            ],
            orientationList : [],
            sizeList:[
                {value:'0',label:'小于50㎡'},
                {value:'1',label:'50㎡-90㎡'},
                {value:'2',label:'90㎡-120㎡'},
                {value:'3',label:'大于120㎡'}
            ]

        }
    },
    mounted() {
        this.init()
        this.getDict()
        this.getOrientationList()
    },
    methods: {
        async getOrientationList() {
            const res = await getOrientationList()
            res.info.forEach(item => {
                const orientation = {}
                orientation.value = item.value
                orientation.label = item.name
                this.orientationList.push(orientation)
            })
        },
        async getDict() {
            const res = await getDict()
            res.info.forEach(item => {
                const city = {}
                city.value = item.city_code
                city.label = item.city_name
                this.cityList.push(city)
            })
        },
        handleSubmit() {
            this.init();
        },
        async init() {
            const res = await rent(`city_code=${this.searchParams.city_code}&rent_mode=${this.searchParams.rent_mode}&orientation=${this.searchParams.orientation}&size=${this.searchParams.size}`);
            this.eData = res.info
            this.drawChart();
        },
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main'));


            // 指定图表的配置项和数据
            var option = {
                color: [
                    '#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff',
                    '#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff',
                    '#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff',
                    '#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff',
                    '#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff',
                    '#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'
                ],
                legend: {
                    top: 'bottom',
                    textStyle: {
                        fontSize: 10,
                        color: '#000',
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                series: [
                    {
                        name: '租金范围',
                        type: 'pie',
                        radius: ['20%', '50%'],
                        center: ['50%', '50%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: this.eData,
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // 跟着缩放
            window.addEventListener('resize', function () {
                // 让我们的图表调用 resize这个方法
                myChart.resize();
            });
        }
    }
}

</script>
<style>
.app_data {
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 0 200px;
    font-family: "Open Sans", sans-serif;
    color: #444;
}

.title {
    margin: 4px auto;
    padding: 30px;
    text-align: center;
}

.title h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #5c768d;
}

.title span {
    font-size: 16px;
    color: #444;
    font-family: "Open Sans", sans-serif;
}

.update {
    background: #f5f9fc;
}
</style>
